<template>
  <div class="block-title">
    <span :class="['title', type]" :style="{fontSize: fontSize}">
      <template v-if="title">
        {{ title }}
      </template>
      <template v-else>
        <slot></slot>
      </template>
    </span>
  </div>
</template>
<script>
export default {
  name: "PartitionTitle",
  props: {
    title: {
      type: [String, Number],
      default: "",
    },
    // 标题类型   arrow：箭头型，line：前段竖线型
    type: {
      type: String,
      default: "arrow",
    },
    fontSize: {
      type: String,
      default: "0.9375rem",
    }
  },
};
</script>
<style lang="less" scoped>
.block-title {
  margin-bottom: 20px;
  .title {
    display: inline-block;
    vertical-align: middle;
    padding: 0 15px;
    min-width: 100px;
    height: 28px;
    line-height: 28px;
    font-weight: 600;
    position: relative;
    &.arrow {
      background-color: #f89c34;
      color: #ffffff;
      &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        transform: translateX(100%);
        width: 0;
        height: 0;
        border-width: 14px;
        border-style: solid;
        border-left-color: #f89c34;
        border-right-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent;
      }
    }
    &.line {
      color: #f89c34;
      &::before {
        content: "";
        display: block;
        width: 4px;
        height: 20px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: #f89c34;
      }
    }
  }
}
</style>
